<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import chinaJSON from './china.json'

//获取DOM元素
let map = ref()
//注册中国地图
echarts.registerMap('china', chinaJSON as any)
onMounted(() => {
    let mycharts = echarts.init(map.value)//初始化图表
    //设置配置项
    mycharts.setOption({
        geo: {
            map: 'china',
            roam: true,//鼠标缩放效果
            //地图位置
            //地图文字
            label: {
                show: true,
                color: 'white',
                fontSize: 12
            },
            //每一个多边形的样式
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'skyblue' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'white' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                opacity: .8
            },
            //地图高亮样式
            emphasis: {
                label: {
                    fontSize: 20
                }
            }
        },
        //布局位置
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0
        },
        series: [
            {
                type: 'lines',//航线
                data: [
                    {
                        coords: [
                            [116.405285, 39.904989],//起点
                            [119.306239, 26.075302]
                        ],
                        //统一的样式
                        lineStyle: {
                            color: 'yellow',
                            width: 5
                        },
                    }
                ],
                //开启动画特效
                effect: {
                    show: true,
                    symbol:'path://M913.7 513.1l-279.3-152c1.3-41.1 2.2-72.9 2.2-88.8 0-41.2-11.9-81.3-33.5-112.9-22.6-33.1-53-52-83.4-52s-60.8 19-83.4 52c-21.6 31.6-33.5 71.7-33.5 112.9 0 16.1 0.8 48.3 2.2 89.9L127.7 513.1c-7.1 3.8-11.5 11.2-11.5 19.3v90c0 6.5 2.9 12.7 7.9 16.9 4 3.3 9 5.1 14.1 5.1 1.2 0 2.5-0.1 3.8-0.3l271.7-48.6c1.6 39.4 3.2 78.2 4.6 113.8L306 784.1c-6.1 4.1-9.8 10.9-9.8 18.3v78.8c0 6.9 3.2 13.3 8.7 17.5 3.8 2.9 8.5 4.5 13.3 4.5 1.9 0 3.9-0.2 5.8-0.8l101.3-27.7c0.5 11.7 10.2 21 22 21h51.4V915c0 12.2 9.8 22 22 22s22-9.9 22-22v-19.3h49.5c11.8 0 21.5-9.3 21.9-21v-0.6l103.4 28.3c1.9 0.5 3.9 0.8 5.8 0.8 4.7 0 9.4-1.5 13.3-4.5 5.5-4.2 8.7-10.6 8.7-17.5v-78.8c0-7.3-3.7-14.2-9.8-18.3L621.1 708c1.5-35.3 3-73.8 4.6-112.9l273.7 49c1.3 0.2 2.6 0.3 3.9 0.3 5.1 0 10.1-1.8 14-5.1 5-4.2 7.9-10.4 7.9-16.9v-90c0-8-4.4-15.4-11.5-19.3z m-753.5 83.1v-50.7l246.5-134.2c1.5 42.7 3.3 91 5.3 139.9l-251.8 45z m180 256.2v-38.2l80.3-53.4c1.1 26.7 2.1 50.2 2.9 68.9l-83.2 22.7z m202.5-0.7v-83c0-12.2-9.8-22-22-22s-22 9.8-22 22v83h-30.3c-4.2-98.1-21.6-508.1-21.4-579.4 0-32 9.4-64.1 25.8-88.1 14-20.5 31.7-32.8 47.1-32.8s33 12.2 47.1 32.8c16.4 24 25.8 56.1 25.8 88.1 0 71.3-17.4 481.3-21.6 579.4h-28.5z m158.6-37.5v38.2L616.1 829c0.8-18.9 1.8-42.6 2.9-69.6l82.3 54.8z m179.9-218.1l-253.7-45.4c1.9-49.1 3.8-97.6 5.3-140.5l248.4 135.2v50.7z',
                    color:'black',
                    symbolSize:30
                }
            }
        ]
    })
});





</script>

<template>
    <div class="box4" ref="map">
        地图
    </div>

</template>

<style scoped></style>